import logo from '../../pictures/favicon.png'
import {useState} from 'react';

const menus = [
    {
        key: '1',
        title: '首 页',
        path: '/'
    },
    {
        key: '2',
        title: '仪表板',
        path: '/dashboard'
    },
    {
        key: '3',
        title: '主题管理',
        path: '/topic'
    },
    {
        key: '4',
        title: '消息管理',
        path: '/message'
    },
    {
        key: '5',
        title: '消费者管理',
        path: '/consumer'
    }
]

const AppHeader = () => {

    // 鼠标悬停的菜单项key
    const [hoveredMenuItemPath, setHoveredMenuItemPath] = useState("");
    // 当前选中的菜单项key
    const [choseMenuItemKey, setChoseMenuItemKey] = useState(
        "/" + window.location.href.substring(window.location.href.lastIndexOf("/") + 1));

    return (
        <div style={{height: '50px', display: 'flex', alignItems: 'center'}}>
            <div style={{
                display: 'flex',                // 使用 Flexbox
                alignItems: 'center',           // 垂直居中
                justifyContent: 'center',       // 水平居中
                gap: '10px',                    // 元素间距
                height: '6vh',                  // 容器高度
                marginRight: '20px',
                marginLeft: '10px'
            }}>
                <img src={logo} alt="Logo" style={{height: '60%', borderRadius: '50%'}}/>
                <div style={{color: '#00CCCC', fontWeight: 'bold'}}>
                    GengzpMq 消息队列控制台
                </div>
            </div>

            {menus.map((menu) => (
                <div
                    key={menu.key}
                    style={{
                        height: '50px',
                        padding: '0 1.5vw',
                        cursor: 'pointer',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor:
                            hoveredMenuItemPath === menu.path && choseMenuItemKey !== menu.path ?
                                'rgba(255, 255, 255, 0.3)' :
                                choseMenuItemKey === menu.path ?
                                    '#009999' :
                                    'transparent'
                    }}
                    onMouseEnter={() => {
                        setHoveredMenuItemPath(menu.path)
                    }}
                    onMouseLeave={() => setHoveredMenuItemPath("")}
                    onClick={() => {
                        setChoseMenuItemKey(menu.key);
                        window.location.href = menu.path
                    }}
                >
                    <span style={{color: 'white', fontWeight: 'bold'}}>{menu.title}</span>
                </div>
            ))}
        </div>
    )
}
export default AppHeader;